<template>
  <div class="space-rank-analyze">
    <a-card title="空间使用排行">
      <v-chart :option="options" style="height: 320px" />
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import {getSpaceRankAnalyzeUsingPost} from '@/api/spaceAnalyzeController.ts'
import {message} from 'ant-design-vue'
import VChart from 'vue-echarts'

// 图表数据
const dataList = ref<API.Space[]>([])
const loading = ref(true)

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

/**
 * 加载数据
 */
const fetchData = async () => {
  loading.value = true
  const res = await getSpaceRankAnalyzeUsingPost({
    // 使用类型断言处理额外属性
    ...({
      queryAll: props.queryAll,
      queryPublic: props.queryPublic,
      spaceId: props.spaceId,
    } as unknown as Partial<API.SpaceRankAnalyzeRequestDTO>), // 或者 as any
  });

  if (res.data.code === 0) {
    dataList.value = res.data.data ?? []
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  loading.value = false
}

const options = computed(() => {
  const spaceNames = dataList.value.map((item) => item.spaceName)
  const usageData = dataList.value.map((item) =>
    ((item.totalSize ?? 0) / (1024 * 1024)).toFixed(2)
  );// 转为 MB
  return {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: spaceNames,
    },
    yAxis: {
      type: 'value',
      name: '空间使用量 (MB)',
    },
    series: [
      {
        name: '空间使用量 (MB)',
        type: 'bar',
        data: usageData,
        itemStyle: {
          color: '#5470C6', // 自定义柱状图颜色
        },
      },
    ],
  }
})

/**
 * 监听变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  fetchData()
})

</script>


<style scoped>

</style>
